<script setup>
    import { useStore } from 'vuex'
    import { onMounted } from 'vue'
    import { getVeteranGenreList, getVeteranList } from '@/api/govern'

    const store = useStore()

    const props = defineProps({
        sysOrgCode: {
            type: [String, Number]
        }
    })
    
    // 获取列表
    let resData = $ref([])

    // 总条数
    let totalCount = $ref(0)

    // 筛选
    let filterParams = $ref({
        pageNo: 1,
        pageSize: 10
    })
    if(props.orgCode) filterParams.orgCode = props.orgCode
    else delete filterParams.orgCode

    // 是否展开
    let isUnfold = $ref(true)

    // 列表数据加载中
    let dataLoading = $ref(false)

    const getList = () => {
        dataLoading = true
        getVeteranList(filterParams).then(res => {
            dataLoading = false
            if(res.success){
                let { records, total } = res.result

                resData = records
                totalCount = total
            }
        })
    }
    getList()

    // 分页
    const handleCurrentChange = (page) => {
        filterParams.pageNo = page
        getList()
    }

    const handleSizeChange = (size) => {
        filterParams.pageSize = size
        getList()
    }

    // 搜索
    const hadleSearch = () => {
        filterParams.pageNo = 1
        getList()
    }

    // 重置
    const handleClickReset = () => {
        let sysOrgCode = props.sysOrgCode ? filterParams.sysOrgCode : ''
        filterParams = {
            pageNo: 1,
            pageSize: 10,
            sysOrgCode
        }
    }

    
    let gradeList = $ref([])
    onMounted(() => {
        // 人员类别
        getVeteranGenreList().then(res => {
            gradeList = res.result
        })
        
    })

    const emit = defineEmits(['handleClickDetials'])

    // 点击详情 
    const handleClick = (id) => {
        emit('handleClickDetials', id)
    }


</script>

<template>
    <div>
        <div class="xz-filter-wrap">
            <el-form :inline="true" :label-width="85">
    
                <el-form-item label="行政村">
                    <el-select v-model="filterParams.orgCode" placeholder=" " clearable @clear="delete filterParams.orgCode">
                        <el-option
                            v-for="(item, index) in store.state.villageList"
                            :key="index"
                            :label="item.departName"
                            :value="item.orgCode"
                        >
                            {{ item.departName }}
                        </el-option>
                    </el-select>
                </el-form-item>
    
                <el-form-item label="姓名">
                    <el-input v-model="filterParams.name" clearable></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="filterParams.idCard" clearable></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="filterParams.phone" clearable></el-input>
                </el-form-item>
                <template v-if="isUnfold">
                    <el-form-item label="人员类别">
                        <el-select v-model="filterParams.s2" placeholder=" " clearable @clear="delete filterParams.s13">
                            <el-option
                                v-for="(item, index) in gradeList"
                                :key="index"
                                :label="item.itemText"
                                :value="item.itemValue"
                            >
                                {{ item.itemText }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                </template>
            </el-form>
    
            <div class="btn-wrap flex-center"> 
                <div class="btn reset-btn" @click="handleClickReset">重置</div>
                <div class="btn search-btn" @click="hadleSearch">查询</div>
            </div>
    
            <div class="fold flex-center" @click="isUnfold=!isUnfold">
                {{ isUnfold ? '收起' : '展开' }}
                <i class="arrow" :class="{ 'arrow-top': isUnfold }"></i>
            </div>
    
    
        </div>
    
        <div class="xz-filter-list mt10" v-loading="dataLoading">
            <div class="result-title">
                查询结果
                <span class="result-count">共{{ totalCount }}条</span>
            </div>
            <el-table 
                :data="resData" 
                style="width: 100%"
                :height="isUnfold ? 363 : 411"
                size="large"
                class="xz-table"
                :scrollbar-always-on="true"
            >
                <el-table-column type="index" label="序号" min-width="60" align="center" />
                <el-table-column prop="name" label="姓名" min-width="65" />
                <el-table-column prop="idCard" label="身份证号码" min-width="180" />
                <el-table-column prop="orgCode_dictText" label="所属村" min-width="150" />
                <el-table-column prop="phone" label="联系方式" min-width="120" align="center" />
                <el-table-column prop="s1" label="行政区划" min-width="150" />
                <el-table-column prop="s2_dictText" label="人员类别" min-width="140" />
                <el-table-column prop="remark" label="备注" min-width="120" />
                <el-table-column prop="remark" label="操作" min-width="90">
                    <template #default="scope">
                        <el-link type="primary" @click="handleClick(scope.row.idCard)">详情</el-link>
                    </template>
                </el-table-column>
            </el-table>
    
            <el-pagination 
                class="mt20" 
                background 
                layout="total, sizes, prev, pager, next" 
                :total="totalCount" 
                :page-size="filterParams.pageSize"
                :current-page="filterParams.pageNo"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
            />
    
        </div>
    </div>

</template>